<template>
    <div class="TopInfo">
        <el-autocomplete
          size="mini"
          clearable
          style="width: 200px;margin-right: 100px"
          placeholder="选择你想要跳转的页面"
          v-model="jumpRouter"
          value-key="menuName"
          :fetch-suggestions="handleMenuFetch"
          @select="handleMenuSelect"
        >
            <template slot-scope="{ item }">
                <div>
                    <i :class="item.icon"></i>
                    <span style="margin-left: 5px">{{item.menuName}}</span>
                </div>
            </template>
        </el-autocomplete>
        <el-dropdown @command="dropdownChange" style="position: relative;top: -5px;">
              <span class="el-dropdown-link">
                <img :src="userInfo.imageUrl"
                     style="height: 30px;width: 30px;position: relative;top: 7px;border-radius: 50%;object-fit: cover"/>
                  <span style="position: relative;bottom:3px;left: 5px">{{ userInfo.nickName }}</span>
                  <i style="position: relative;bottom:3px;left: 5px" class="el-icon-arrow-down el-icon--right"></i>
              </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="个人信息">个人信息</el-dropdown-item>
                <el-dropdown-item command="退出登录">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>
<script>
export default {
    data() {
        return {
            jumpRouter: '',
            value: '',
            menuInfo: '',
            userInfo: JSON.parse(localStorage.getItem("user"))
        }
    },
    watch: {
        '$route': {
            handler(newValue, oldValue) {
                this.menuInfo = newValue
            },
            deep: true
        }
    },
    methods: {
        handleMenuFetch(queryString,cb) {
            this.request.get("/menu/menuChildrenList?menuName=" + queryString).then(res => {
                if (res.code === '200') {
                    cb(res.data)
                }
            })
        },
        handleMenuSelect(e) {
            this.$router.push({name: e.name})
        },
        dropdownChange(e) {
            console.log("dropdownChange", e)
            if (e === '退出登录') {
                // TODO 1 调用退出登录的接口
                this.request.get("/web/logout").then(res => {
                    if (res.code === '200') {
                        // TODO 2 调用成功之后清除缓存
                        localStorage.removeItem("user")
                        localStorage.removeItem("menus")
                        // TODO 3 跳转到登录页面
                        this.$router.push({name: "login"})
                    }
                })
            } else if (e === '个人信息') {
                this.$router.push({name: "personInfo"})
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.TopInfo {
    height: 50px;
    background-color: var(--person-backgroud-color);
    display: flex;
    align-items: center;
    padding-left: 10px;
    justify-content: flex-end;



    :deep(.el-breadcrumb) {
        font-size: 14px;
        margin-left: 13px;

        .el-breadcrumb__inner {
            color: darkgray;
        }
    }

    :deep(.el-dropdown) {
        font-size: 14px;
        color: white;
        position: relative;
        right: 30px;
    }
}
</style>